import { defineStore } from 'pinia';
import { useAntdVueTheme } from '@ykst/hooks';
import { theme } from 'ant-design-vue';

export const useThemeStore = defineStore('theme', () => {
  // 自定义主题配置
  const customThemeToken = {
    wireframe: false, // 组件线框风格
  };

  // 主色可选色
  const primaryColorOptions = [
    '#3b82f6',
    '#722ed1',
    '#13c2c2',
    '#52c41a',
    '#eb2f96',
    '#f5222d',
    '#fa8c16',
  ];

  const {
    isDark,
    primaryColor,
    themeConfig: _themeConfig,
    ...rest
  } = useAntdVueTheme(customThemeToken, primaryColorOptions, true);

  const { defaultAlgorithm, darkAlgorithm } = theme;

  type ThemeMode = 'dark' | 'light' | 'auto';
  /**
   * 主题模式
   * @desc 通过 setThemeMode 方法切换主题模式
   */
  const themeMode = ref<ThemeMode>('auto');

  /**
   * 设置主题模式
   * @desc 在不同的布局页面调用 setThemeMode 方法，切换主题模式
   */

  const setThemeMode = (v: ThemeMode) => (themeMode.value = v);

  /**
   * 主题配置
   */
  const themeConfig = computed(() => {
    switch (themeMode.value) {
      case 'light':
        return {
          token: _themeConfig.value.token,
          algorithm: defaultAlgorithm,
        };
      case 'dark':
        return {
          token: _themeConfig.value.token,
          algorithm: darkAlgorithm,
        };
      case 'auto':
      default:
        return _themeConfig.value;
    }
  });

  return {
    isDark,
    primaryColor,
    primaryColorOptions,
    setThemeMode,
    themeConfig,
    ...rest,
  };
});
